<!--
 * @Description: 自主服务列表
 * @Author: Kerwin
 * @Date: 2025-07-25 16:56:13
 * @LastEditTime: 2025-07-28 15:36:16
 * @LastEditors:  Please set LastEditors
-->

<template>
  <view class="service">
    <template v-if="serviceList.length > 0">
      <view
        class="serviceList"
        @click="goDetail(item)"
        v-for="item in serviceList"
        :key="item.id"
      >
        <u-cell-item
          title-style="font-size: 28rpx"
          :title="item.title"
        ></u-cell-item>
      </view>
      <!-- 返回顶部按钮 -->
      <u-back-top :scroll-top="scrollTop"></u-back-top>
    </template>
    <view class="empty" v-else>
      <u-empty text="暂无数据哦~" mode="list"></u-empty>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { onLoad, onReady, onPageScroll } from '@dcloudio/uni-app'
//api
import { baseApi } from '@/api'
//工具
import { dateFormat } from '@/utils'

const serviceList = ref<any>([])
const integralsRuleId = ref(null)
const options = ref<any>({})
const loading = ref(false)
const scrollTop = ref(0)
// onMounted(() => {
//   getServiceList()
// })
// 获取服务列表
async function getServiceList() {
  loading.value = true
  console.log(options.value.keyWord, 'options.value.keyWord')

  const { data } = await baseApi.getproblemList({
    detail: true,
    noPaging: true,
    type: options.value.type,
    integralsRuleId: options.value.integralsRuleId,
    keyWord: options.value.keyWord
  })
  if (data && data.length > 0) {
    serviceList.value = data
  } else {
    serviceList.value = []
  }
  loading.value = false
  console.log(serviceList.value)
}

//服务详情
const goDetail = (item: any) => {
  console.log(item, '48631')
  uni.navigateTo({
    url: '/packageA/pages/selfService/selfServiceDetail?id=' + item.id
  })
}
onPageScroll((e: any) => {
  scrollTop.value = e.scrollTop
})

onLoad((option: any) => {
  console.log(option, 'option')

  if (option) {
    // integralsRuleId.value = option.type
    options.value = option
    getServiceList()
  }
})
</script>

<style lang="scss" scoped>
.service {
  padding: 20rpx;
  .serviceList {
    margin: 20rpx 0;
    border-radius: 10rpx;
    background-color: #fff;
    .titleBox {
      padding: 10rpx 20rpx;
      .title {
        margin-top: 20rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 30rpx;
        font-weight: 600;
        margin-bottom: 30rpx;

        .dot {
          width: 20rpx;
          height: 20rpx;
          background-color: red;
          border-radius: 50%;
        }
      }

      .subtitle {
        font-size: 26rpx;
      }
    }
  }
}
// :deep(.u-cell_title[data-v-f6be5641]) {
//   font-size: 24rpx !important;
// }
// :deep(.u-cell__value[data-v-f6be5641]) {
//   font-size: 24rpx !important;
// }
// :deep(.u-cell[data-v-f6be5641]) {
//   font-size: 18rpx !important;
//   padding: 15rpx;
// }
.empty {
  margin-top: 500rpx;
}
</style>
